<template>
  <div>
    <h3>hello work 组件</h3>
    <p>这个是自己data:{{dataString}}</p>
    <p>这是props入参信息:{{msg}}</p>
    <p>这是props2入参信息:{{msg2}}</p>
    <p>这是comput的方法:{{computData}}</p>
    <p>Watch:{{count}} <button @click="changeCount">点击改变</button></p>
    <p><button @click="subClick">点击,调用父亲组件</button></p>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop, Watch } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  private dataString?: string = '';
  private name?: string = '';
  private count: number = 1;

  @Prop() private msg!: string;
  @Prop() private msg2!: string;

  // computed
  get computData(): string {
    return this.dataString + '+computData';
  }

  // watch
  @Watch('count')
  public watchCount(newVal: number, oldVal: number): void {
    console.log(newVal, 'watch');
  }

  public create() {
    console.log('hello组件-create');
    this.dataString = 'newDataString';
  }

  public mounted() {
    this.dataString = 'newDataString';
  }

  // method
  public changeCount() {
    this.count ++;
  }

  public subClick() {
    this.$emit('subClick', 'hashhdhashdhah');
  }

  public refFn() {
    console.log('这个是ref调用的方法');
  }
}
</script>

<style scoped>
</style>